<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="form" class="layui-form">
<ul class="layui-nav layui-bg-cyan">
    <li class="layui-nav-item">
        <a href="javascript:;">社区人员管理</a>
        <dl class="layui-nav-child">
            <dd><a href="/gologin">社区基本人员管理</a></dd>
            <dd><a href="">重点关注人员列表</a></dd>
            <dd><a href="">长期居住未登记列表</a></dd>
            <dd><a href="">疫情防疫登记记录</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">预警管理</a>
        <dl class="layui-nav-child">
            <dd><a href="">预警设置</a></dd>
            <dd><a href="">未在社区登录人员频繁出入记录</a></dd>
            <dd><a href="">未在社区登录人员夜间出入记录</a></dd>
            <dd><a href="">重点关注人员出入记录</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">车辆管理</a>
        <dl class="layui-nav-child">
            <dd><a href="">车辆登记列表</a></dd>
            <dd><a href="">车辆出入管理</a></dd>
            <dd><a href="">陌生车辆进入社区记录</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">小区房屋管理</a>
        <dl class="layui-nav-child">
            <dd><a href="">房屋现住情况</a></dd>
            <dd><a href="">房屋空屋管理</a></dd>
            <dd><a href="">房屋人员登记撤离记录</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">系统设置</a>
        <dl class="layui-nav-child">
            <dd><a href="/gorole">角色管理</a></dd>
            <dd><a href="">账号管理</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item" >
        <a href="">预警提示<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item" lay-unselect="">
        <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img"></a>
        <dl class="layui-nav-child">
            <dd style="text-align: center;"><a href="/gologin">退出</a></dd>
        </dl>
    </li>
</ul>





    请输入角色名称：<input type="text" class="layui-input" name="rname">
</form>


<button onclick="selectrole()" class="layui-btn layui-btn-normal layui-btn-radius">查询</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius">重置</button><br>
<a href=""></a><br>

<div class="layui-btn-group">
    <button type="button" onclick="add()" class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> +添加</button>
    <!--<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>-->
    <!--<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>-->
    <!--<button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>-->
</div>
<table id="myTable" lay-filter="myFilter"></table>
<a class="layui-input-block" id="open">
    <input type="checkbox" name="switch" lay-skin="switch" checked="" lay-text="ON|OFF" lay-filter="autoplay">
</a>

<script type="text/html" id="sexTpl">
    <a class="layui-btn"   lay-event="addStock" href="/goallocation">权限分配</a>
    <a class="layui-btn"   lay-event="addStock">编辑</a>
    <a class="layui-btn"   lay-event="addStock" onclick="delRole()">删除</a>
</script>
</body>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script type="text/javascript" src="/js/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" >


    var table=layui.table;
    table.render({
        elem: '#myTable',//绑定表格的id
        url: "/role/selectRole",
        width: 1800,
        method: 'post',
        autoSort: false,
        // toolbar: '#toolbarDemo', //开启头部工具栏
        cols: [[ {
            title: '序号',
            field: 'rid',
            align: 'center',//字体居中
        }, {
            field: 'rname',
            title: '角色名称',
            align: 'center',//字体居中
        }, {
            field: 'coding',
            title: '编码',
            align: 'center',//字体居中
            /* templet : '#sexTpl',//绑定代码模板 暂时用不到 男女 * */
        }, {
            field: 'type',
            title: '角色类型',
            align: 'center',//字体居中
            /* templet : '#sexTpl',//绑定代码模板 暂时用不到 男女 * */
        }, {
            field: 'uname',
            title: '状态',
            align: 'center',//字体居中
            templet : '#open',//绑定代码模板 暂时用不到 男女
        }, {
            field: 'time',
            title: '操作',
            align: 'center',//字体居中
            templet : '#sexTpl',//绑定代码模板 暂时用不到 男女
        }]
        ],
        limits: [3, 5],//每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
        limit: 3,//每页显示的条数（默认：10）。值务必对应 limits 参数的选项。
        page: true,//是否开启分页
        request: {
            pageName: 'page',
            limitName: 'limit'
        }
    })

    function selectrole() {
        var data = $("#form").serialize();
        console.log(data)
        table.render({
            elem: '#myTable',//绑定表格的id
            url: "/role/selectRole?"+data,
            width: 1800,
            method: 'post',
            autoSort: false,
            // toolbar: '#toolbarDemo', //开启头部工具栏
            cols: [[ {
                title: '序号',
                field: 'rid',
                align: 'center',//字体居中
            }, {
                field: 'rname',
                title: '角色名称',
                align: 'center',//字体居中
            }, {
                field: 'coding',
                title: '编码',
                align: 'center',//字体居中
                /* templet : '#sexTpl',//绑定代码模板 暂时用不到 男女 * */
            }, {
                field: 'type',
                title: '角色类型',
                align: 'center',//字体居中
                /* templet : '#sexTpl',//绑定代码模板 暂时用不到 男女 * */
            }, {
                field: 'uname',
                title: '状态',
                align: 'center',//字体居中
                templet : '#open',//绑定代码模板 暂时用不到 男女
            }, {
                field: 'time',
                title: '操作',
                align: 'center',//字体居中
                templet : '#sexTpl',//绑定代码模板 暂时用不到 男女
            }]
            ],
            limits: [3, 5],//每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
            limit: 3,//每页显示的条数（默认：10）。值务必对应 limits 参数的选项。
            page: true,//是否开启分页
            request: {
                pageName: 'page',
                limitName: 'limit'
            }
        })

    }

    function add() {
        location.href="/goaddrole"
    }

    function delRole() {
        table.on('tool(myFilter)',function (obj) {
            var data = obj.data;

            var rid = data.rid;
            console.log(rid)
            $.get("/role/delRole?rid="+rid,function (res) {
                if(res=="ok"){
                    alert("删除成功！")
                    location.href="/gorole"
                }else{
                    alert("删除失败！")
                    location.reload();
                }
            },"text");
        });

    }

</script>
</html>